﻿<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <!-- Meta -->
    <meta name="description" content="Customer Information Management System."/>
    <meta name="author" content="WY"/>

    <link rel="shortcut icon" th:href="@{/picture/favicon.ico}" type="image/x-icon"/>
    <title>茅台·天津 | 会员管理系统</title>

    <!-- vendor css -->
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link th:href="@{/css/ionicons.css}" rel="stylesheet"/>

    <!-- Starlight CSS -->
    <link rel="stylesheet" th:href="@{/css/starlight.css}"/>

    <style>
        .error{
            color:red;
        }
    </style>
</head>

<body>

<div class="d-flex align-items-center justify-content-center bg-sl-primary ht-100v">

    <div class="login-wrapper wd-300 wd-xs-350 pd-25 pd-xs-40 bg-white">
        <div class="signin-logo tx-center tx-24 tx-bold tx-inverse"><span class="tx-info tx-normal">会员管理系统</span>
        </div>
        <div class="tx-center mg-b-30">Member management system.</div>
        <div id="msg" class="error tx-center"></div>

        <form id="form_login">
            <div class="form-group">
                <input type="text" name="username" class="form-control" placeholder="输入用户名"/>
            </div><!-- form-group -->
            <div class="form-group">
                <input type="password" name="password" class="form-control" placeholder="输入密码"/>
                <a href="#" class="tx-info tx-12 d-block mg-t-10">忘记密码?</a>
                <a href="#" class="tx-info tx-12 d-block mg-t-10" id="bt_autoLogin">一键登录</a>
            </div><!-- form-group -->
            <input id="bt_submit" type="button" class="btn btn-info btn-block" value="登  录"/>
        </form>

        <!--<div class="mg-t-60 tx-center">没有账号? <a href="page-signup.html" class="tx-info">注 册</a></div>-->
        <div class="mg-t-60 tx-center">使用中有任何问题请联系系统管理员。</div>
    </div><!-- login-wrapper -->
</div><!-- d-flex -->

<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/popper.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
<script th:src="@{/js/jquery.validate.min.js}"></script>
<script th:src="@{/js/md5.js}"></script>

<script>
    $(function () {
        $("#form_login").validate({
            rules:{
                username:{
                    required: true,
                    minlength: 1
                },
                password:{
                    required: true,
                    minlength: 6
                }
            },
            messages:{
                username:{
                    required:"用户名不能为空！",
                    minlength:"用户名长度非法！"
                },
                password:{
                    required:"密码不能为空！",
                    minlength:"密码长度不低于6位！"
                }
            }
        });

        $("#bt_submit").click(function(){
            $.ajax({
                type: "POST",
                url: "/crm/login",
                data: {
                    "username" : $('input[name="username"]').val(),
                    "password" : $.md5($('input[name="password"]').val())
                },
                success: function(data) {
                    console.log(data);
                    if (data) {
                        $(location).attr('href', '/crm/customer/list');
                    } else {
                        $("#msg").html("用户名或密码错误！");
                    }
                }
            });
        });

        $("#bt_autoLogin").click(function(){
            $.ajax({
                type: "POST",
                url: "/crm/autoLogin",
                success: function(data) {
                    console.log(data);
                    if (data) {
                        $(location).attr('href', '/crm/customer/list');
                    } else {
                        $("#msg").html("用户名或密码错误！");
                    }
                }
            });
        });

    });
</script>
</body>
</html>